<template>
    <div class="content-container">
        <div v-if="isShowByBlogTagId" class="content-container-img">
            <div class="auto-image-left">
                <a-carousel autoplay arrows>
                    <div
                            slot="prevArrow"
                            class="custom-slick-arrow"
                            style="left: 10px;zIndex: 1"
                    >
                        <a-icon type="left-circle"/>
                    </div>
                    <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                        <a-icon type="right-circle"/>
                    </div>
                    <div><h3>1</h3></div>
                    <div><h3>2</h3></div>
                    <div><h3>3</h3></div>
                    <div><h3>4</h3></div>
                </a-carousel>
            </div>
            <div class="image-right">
                <div class="image-right-top"></div>
                <div class="image-right-bottom"></div>
            </div>
        </div>
        <ul>
            <li v-for="(blogInfoVO, index) in blogInfoVOs" :key="index">
                <div class="content-container-body">
                    <div class="content-container-body-title">
                        <a @click="toViewBlog(blogInfoVO.blogInfo.id)"><span style="color: red; font-size: 18px; font-weight: bold">
                            <i>D</i></span><i style="color: black">SCN</i> 推荐：
                        {{ blogInfoVO.blogInfo.title }}
                        </a>
                    </div>
                    <div class="content-container-body-content">
                        {{ blogInfoVO.blogInfo.content }}
                    </div>
                    <div class="author-blog-info">
                        <div class="author-info">
                            <a-avatar :src="blogInfoVO.user.userInfo.avatarUrl"/>&nbsp;&nbsp;{{
                            blogInfoVO.user.userInfo.nickname }}
                        </div>
                        <div class="blog-info">
                            <div class="flex-wrap">
                                <span @click="likeNum(blogInfoVO.blogInfo.id)"><svg-icon
                                        icon="icondianzan"/>&nbsp;<span>{{blogInfoVO.blogInfo.likeNum}}</span>&nbsp;|&nbsp;</span>
                                <svg-icon icon="iconeye"/>&nbsp;<span>{{blogInfoVO.blogInfo.pageViewNum}}</span>&nbsp;|&nbsp;
                                <svg-icon icon="iconmessage"/>&nbsp;<span>111</span>
                            </div>
                        </div>
                    </div>
                </div>
            </li>

        </ul>
    </div>
</template>

<script>

    import {listOrderByViewNum, addLikeNum, likeNum} from "@/api/blog/blogInfo"
    import {findBlogTagByName, findPVTopNBlogByTagId} from "@/api/blog/blogTag";
    import {getUserInfo} from "@/api/user/userInfo";

    export default {
        name: "my-content",
        data() {
            return {
                blogInfoVOs: [],
                blogInfoVO: {
                    /* blogInfo: {},
                     user: {
                         userInfo: {}
                     }*/
                },
                isShowByBlogTagId: true,
                blogNumber: 10,
                blogTagVO: {}
            }
        },
        computed: {
            blogTag() {
                return this.$store.state.blogTag
            }
        },
        watch: {
            blogTag: {
                handler: function () {
                    this.findBlogTagByName();
                    this.blogInfoVOs = [];
                    this.findPVTopNBlogByTagId();
                },
                deep: true
            }
        },
        methods: {
            async init() {
                /*const data = await listOrderByViewNum();
                this.blogInfoVOs = data;*/
                /*await this.findPVTopNBlogByTagId();*/
            },
            /* 点赞 */
            async likeNum(id) {
                const userId = this.$store.state.user.id
                const data = await likeNum(id, userId);
            },
            /* 查找推荐，用来对比id，是否展示轮播图 */
            async findBlogTagByName() {
                const data = await findBlogTagByName('推荐');
                const blogTag = this.blogTag
                if (blogTag.id === data.id) {
                    this.isShowByBlogTagId = true
                } else {
                    this.isShowByBlogTagId = false
                }
                console.log(this.isShowByBlogTagId)
            },
            /* 查询对应博客标签下的所有博客 */
            async findPVTopNBlogByTagId() {
                const blogTag = this.blogTag
                const data = await findPVTopNBlogByTagId(this.blogNumber, blogTag.id)
                const blogInfos = data.blogInfos
                const blogInfoVOs = []
                for (const blogInfo of blogInfos) {
                    let blogInfoVO = {}
                    if (blogInfo.tuserId !== null) {
                        const userVO = await getUserInfo(blogInfo.tuserId)
                        blogInfoVO.blogInfo = blogInfo
                        blogInfoVO.user = userVO
                        console.log(blogInfoVO)
                        blogInfoVOs.push(blogInfoVO)
                    } else {
                        this.$message.success({
                            content: "该栏目占无内容o(╥﹏╥)o",
                            duration: 3
                        })
                    }
                }
                this.blogInfoVOs = blogInfoVOs
            },
            /* 查看每篇博客的详细信息 */
            toViewBlog(id) {
                this.$router.push({
                    name: 'viewBlog',
                    query: {id: id}
                })
            }
        },
        mounted() {
            this.init()
        }
    }
</script>

<style scoped>
    .blog-info {
        float: right;
        padding: 8px;
    }

    .blog-info .flex-wrap {
        display: flex;
        align-items: center;
    }

    .blog-info span {
        color: blue;
    }

    .author-info {
        float: left;
        margin-left: 10px;
        margin-top: 8px;
    }

    ul {
        background: white;
        display: inline-block;
        margin: 0;
        padding: 0;
        float: left;
        width: 760px;
        min-height: 120px;
    }

    li {
        background: white;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .author-blog-info {
        margin-bottom: 5px;
        float: bottom;
        overflow: hidden;
    }

    .content-container-body {
        border-bottom: rgba(242, 245, 247, 1) 1px solid;
    }

    .content-container-body-content {
        overflow: hidden;
        display: -webkit-box;
        min-height: 44px;
        -webkit-box-orient: vertical; /*使用该属性的前提是display:box;*/
        -webkit-line-clamp: 2; /*显示的行数*/
        font-size: 15px;
        color: darkgrey;
        margin-left: 10px;
    }

    .content-container-body-title {
        font-size: 18px;
        font-weight: bold;
        margin-left: 10px;
    }

    .content-container-body {
        float: left;
        width: 760px;
        /*height: 120px;*/
        padding: 10px 0;
    }

    .content-container {
        padding: 0;
        float: left;
        width: 760px;
        background: white;
        margin: 0;
    }

    .content-container-img {
        padding: 0;
        float: left;
        width: 760px;
        background: white;
        margin: 0;
    }

    .ant-carousel {
        width: 510px;
    }

    .ant-carousel >>> .slick-slide {
        text-align: center;
        height: 200px;
        line-height: 200px;
        background: #364d79;
        overflow: hidden;
        width: 510px;
    }

    .ant-carousel >>> .slick-slide h3 {
        color: #fff;
    }

    .ant-carousel >>> .custom-slick-arrow {
        width: 25px;
        height: 25px;
        font-size: 25px;
        color: #fff;
        background-color: rgba(31, 45, 61, 0.11);
        opacity: 0.3;
    }

    .ant-carousel >>> .custom-slick-arrow:before {
        display: none;
    }

    .ant-carousel >>> .custom-slick-arrow:hover {
        opacity: 0.5;
    }

    .auto-image-left {
        float: left;
    }

    .image-right {
        width: 240px;
        height: 200px;
        /*background: #2c3e50;*/
        float: right;
    }

    .image-right-top {
        width: 240px;
        height: 98px;
        background: red;
    }

    .image-right-bottom {
        width: 240px;
        height: 98px;
        background: red;
        margin-top: 4px;
    }
</style>
